<template>
	<div id="nav">
		<!-- <router-link to="/home">首页</router-link>
    <router-link to="/list">列表</router-link> -->
		<!-- <router-link v-bind:to="item.path" v-for="item in navData" :key="item.id">{{item.text}}</router-link> -->
		<ul class="navList">
			<li v-for="(item,idx) in navData" :key="idx">
				<!-- 				<img :src="item.imgpath"/>
				<span class="img" :class="[{present1:current===idx},{'':current!=idx}]"></span>
				<span :class="[{present:current===idx},{'':current!=idx}]">{{item.text}}</span> -->
				<router-link :to="`/${item.path}`" active-class="bottomActive">
					<span :class="item.path"></span>
					<p>{{ item.text }}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "List",
		props: {


		},
		data() {
			return {
				navData: [{
						id: '1',
						path: 'shouye',
						text: '首页',
						imgpath: require('@/assets/img/home_nor.png'),

					},
					{
						id: '2',
						path: 'fenlei',
						text: '分类',
						imgpath: require('@/assets/img/sification_nor.png'),

					},
					{
						id: '3',
						path: 'find',
						text: '发现',
						imgpath: require('@/assets/img/find_nor.png'),

					},
					{
						id: '4',
						path: 'shopCar',
						text: '购物车',
						imgpath: require('@/assets/img/cart_nor.png'),

					},
					{
						id: '5',
						path: 'center',
						text: '个人中心',
						imgpath: require('@/assets/img/center_nor.png'),

					},
				],
				current: 0,
			};
		},
		methods: {
			
		},
		
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->


<style scoped="scoped" lang="less">
	.bg-Nav {
		width: 0.24rem;
		height: 0.24rem;
		display: inline-block;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		margin: 0 auto;
	}

	#nav {
		.navList {
			width: 3.75rem;
			justify-content: space-around;
			background-color: #FFFFFF;
			display: flex;
			position: fixed;
			bottom: 0;

			li {
				display: flex;
				flex-direction: column;
				font-size: 0.10rem;
				text-align: center;

				// .present {
				// 	color: red;
				// }
				.bottomActive {
					color: red;
					.shouye {
						background-image: url(../../assets/img/red-icon_home_pre.png);
						.bg-Nav();
					}
					.fenlei {
						background-image: url(../../assets/img/tabbar_icon_classification_pre.png);
						.bg-Nav();
					}
					.find {
						background-image: url(../../assets/img/tabbar_icon_find_pre.png);
						.bg-Nav();
					}
					.shopCar {
						background-image: url(../../assets/img/red-icon_cart_pre.png);
						.bg-Nav();
					}
					.center {
						background-image: url(../../assets/img/red-icon_personal%20center_pre.png);
						.bg-Nav();
					}
				}
			}

			.shouye {
				background-image: url(../../assets/img/home_nor.png);
				.bg-Nav();
			}

			.fenlei {
				background-image: url(../../assets/img/sification_nor.png);
				.bg-Nav();
			}

			// 	.present1 {
			// 		background-image: url(../../assets/img/red-_icon_classify_pre.png);
			// 		.bg-Nav();
			// 	}
			// }

			.find {
				background-image: url(../../assets/img/find_nor.png);
				.bg-Nav();
			}

			// 	.present1 {
			// 		background-image: url(../../assets/img/red-find.png);
			// 		.bg-Nav();
			// 	}
			// }

			.shopCar {
				background-image: url(../../assets/img/cart_nor.png);
				.bg-Nav();
			}

			// 	.present1 {
			// 		background-image: url(../../assets/img/red-icon_cart_pre.png);
			// 		.bg-Nav();
			// 	}
			// }

			.center {
				background-image: url(../../assets/img/center_nor.png);
				.bg-Nav();
			}

			// 	.present1 {
			// 		background-image: url(../../assets/img/red-icon_personal%20center_pre.png);
			// 		.bg-Nav();
			// 	}
			// }
		}
	}
</style>
